<template>
  <div class="Source" :class="isCollapse ? 'hide-collapse' : ''">
    <!--内容部分S-->
    <div class="left-wrap">
      <div class="list-wrap">
        <div>情报类型</div>
        <!--情报类型 0=IP 1=域名 2=URL 3=Hash 4=漏洞-->
        <div class="list-item" @click="handleTabType(index, item)" :class="curIntelType===index?'on':''" :key="index" v-for="(item, index) in intelTypeOptions">
          <span>{{ item.intel_type_name }}</span><span>{{ item.total }}</span>
        </div>
<!--        <div class="list-item">
          <span>域名</span><span>100</span>
        </div>
        <div class="list-item">
          <span>IP地址</span><span>100</span>
        </div>
        <div class="list-item">
          <span>URL</span><span>100</span>
        </div>
        <div class="list-item">
          <span>MD5</span><span>100</span>
        </div>
        <div class="list-item">
          <span>漏洞</span><span>100</span>
        </div>-->
      </div>
      <div class="btn-box" @click="isCollapse=!isCollapse"></div>
    </div>
    <div class="right-wrap">
      <m-table-tmpl :hideOperation="true" style="height: 100%;">
        <template slot="search">
          <div class="search-wrap">
            <div class="btn-wrap">
              <m-button plain @click="handleImport">导入</m-button>
              <m-button plain :disabled="!multipleSelection.length>0" @click="handleBatchDelete">删除</m-button>
            </div>
            <div class="form-wrap">
              <m-form :inline="true" :model="queryData" ref="queryForm">
                <m-form-item label="" prop="malicious_level">
                  <el-select @change="getData" v-model="queryData.malicious_level" clearable placeholder="恶意等级">
                    <el-option label="未知" value="0"></el-option>
                    <el-option label="安全" value="1"></el-option>
                    <el-option label="可疑" value="2"></el-option>
                    <el-option label="恶意" value="3"></el-option>
                  </el-select>
                </m-form-item>
                <m-form-item label="" prop="search_value">
                  <m-input @keyup.enter.native="getData" v-model="queryData.search_value" @input.native="cleanInput" placeholder="搜索情报内容">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getData"></i>
                  </m-input>
                  <!--<m-input v-model="queryData.search_value" placeholder="搜索情报内容/标签">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                  </m-input>-->
                </m-form-item>
                <m-form-item>
                  <!--<m-button type="primary" @click="getData">搜索</m-button>-->
                  <el-button icon="el-icon-refresh-right" @click="handleReset" style="padding: 9px"></el-button>
                </m-form-item>
              </m-form>
            </div>
          </div>
        </template>
        <template slot="table">
          <m-table :data="tableData" ref="formname" @sort-change="sortChange" :maxHeight="tableHeight" @selection-change="handleSelectionChange">
            <m-table-column align="center" type="selection" width="50" fixed="left">
            </m-table-column>
            <m-table-column
                label="序号"
                type="index"
                align="center"
                width="80"
                :index="(index) => tableIndex(index, page, pageSize)"
            ></m-table-column>
            <m-table-column
                :key="index"
                v-for="(item, index) in headsData"
                :label="item.name"
                v-if="item.checked"
                :show-overflow-tooltip="item.name==='情报标签'?false:true"
                :min-width="item.name==='最后一次编辑时间'?100:'auto'"
            >
              <template slot-scope="scope" >
                <div v-show="item.name==='情报内容'">
                  {{scope.row.search_value}}
                </div>
                <div v-show="item.name==='恶意等级'">
                  <el-tag size="mini" v-if="scope.row.malicious_level===0" type="info" class="tag-box">未知</el-tag>
                  <el-tag size="mini" v-if="scope.row.malicious_level===1" type="success">安全</el-tag>
                  <el-tag size="mini" v-if="scope.row.malicious_level===2" type="warning">可疑</el-tag>
                  <el-tag size="mini" v-if="scope.row.malicious_level===3" type="danger">恶意</el-tag>
                </div>
                <div v-show="item.name==='情报标签'" class="tag-tooltip-wrap">
                  <span :key="index" v-for="(item, index) in scope.row.judgments">
                      <el-tooltip :content="scope.row.judgments.join()">
                          <el-tag size="mini" type="" class="tag-item">{{ item }}</el-tag>
                      </el-tooltip>
                  </span>
                  <!--<template v-if="scope.row && scope.row.judgments && scope.row.judgments.length > 3">
                    <el-tag size="mini" type="danger" class="tag-item" v-for="(item, index) in scope.row.judgments.slice(0, 2)" :key="index">{{
                        item }}</el-tag>
                    <el-tooltip :content="scope.row.judgments.slice(2).join(', ')">
                      <el-tag size="mini" type="danger" class="tag-item">{{ `+${scope.row.judgments.length - 2}` }}</el-tag>
                    </el-tooltip>
                  </template>
                  <template v-else-if="scope.row && scope.row.judgments">
                    <el-tag size="mini" type="danger" class="tag-item" v-for="(item, index) in scope.row.judgments" :key="index">{{ item
                      }}</el-tag>
                  </template>-->
                </div>
                <div v-show="item.name==='严重程度'">
                  <!--0=未知(漏洞-待研判) 1=无危胁(漏洞-信息) 2=低(漏洞-低风险) 3=中(漏洞-中风险) 4=高(漏洞-高风险) 5=严重(漏洞-严重风险)-->
                  <el-tag size="mini" v-if="scope.row.severity_level===0" type="info" class="tag-box"> {{scope.row.intel_type === 4?'待研判':'未知'}}</el-tag>
                  <el-tag size="mini" v-if="scope.row.severity_level===1" type="success"> {{scope.row.intel_type === 4?'信息':'安全'}}</el-tag>
                  <el-tag size="mini" v-if="scope.row.severity_level===2" type="warning">{{scope.row.intel_type === 4?'低风险':'低'}}</el-tag>
                  <el-tag size="mini" v-if="scope.row.severity_level===3" type="danger">{{scope.row.intel_type === 4?'中风险':'中'}}</el-tag>
                  <el-tag size="mini" v-if="scope.row.severity_level===4" type="danger">{{scope.row.intel_type === 4?'高风险':'高'}}</el-tag>
                  <el-tag size="mini" v-if="scope.row.severity_level===5" type="danger">{{scope.row.intel_type === 4?'严重风险':'严重'}}</el-tag>
                </div>
                <div v-show="item.name==='情报来源'">
                  <el-tag size="mini" type="">{{ scope.row.intel_source===1?'自定义情报源': '微步本地' }}</el-tag>
                </div>
                <div v-show="item.name==='最后一次编辑时间'">
                  {{scope.row.Updated_at}}
                </div>
              </template>
            </m-table-column>
<!--            <m-table-column
                label="序号"
                type="index"
                align="center"
                width="50"
                :index="(index) => tableIndex(index, page, pageSize)"
            ></m-table-column>
            <m-table-column prop="search_value" label="情报内容">
            </m-table-column>
            <m-table-column prop="malicious_level" label="可信等级" width="85">
              <template slot-scope="scope">
&lt;!&ndash;                恶意等级 0=未知 1=安全 2=可疑 3=恶意&ndash;&gt;
                <el-tag size="mini" v-if="scope.row.malicious_level===0" type="info" class="tag-box">未知</el-tag>
                <el-tag size="mini" v-if="scope.row.malicious_level===1" type="success">安全</el-tag>
                <el-tag size="mini" v-if="scope.row.malicious_level===2" type="warning">可疑</el-tag>
                <el-tag size="mini" v-if="scope.row.malicious_level===3" type="danger">恶意</el-tag>
              </template>
            </m-table-column>
            <m-table-column prop="judgments" label="情报标签">
              <template slot-scope="scope">
                <span :key="index" v-for="(item, index) in scope.row.judgments">
                  <el-tag size="mini" type="danger" class="tag-item">{{ item }}</el-tag>
                </span>
              </template>
              &lt;!&ndash;<template slot-scope="scope">
                <template v-if="scope.row && scope.row.judgments && scope.row.judgments.length > 3">
                  <el-tag size="mini" class="tagMarign" v-for="(item, index) in scope.row.judgments.slice(0, 2)" :key="index">{{
                      item }}</el-tag>
                  <el-tooltip :content="scope.row.judgments.slice(2).join(', ')">
                    <el-tag>{{ `+${scope.row.judgments.length - 2}` }}</el-tag>
                  </el-tooltip>
                </template>
                <template v-else-if="scope.row && scope.row.judgments">
                  <el-tag size="mini" class="tagMarign" v-for="(item, index) in scope.row.judgments" :key="index">{{ item
                    }}</el-tag>
                </template>
              </template>&ndash;&gt;
            </m-table-column>

            <m-table-column prop="intel_source" label="情报来源">
              <template slot-scope="scope">
                &lt;!&ndash;1=自定义情报源 2=微步本地&ndash;&gt;
                <el-tag size="mini" type="">{{ scope.row.intel_source===1?'自定义情报源': '微步本地' }}</el-tag>
              </template>
            </m-table-column>
            <m-table-column prop="Updated_at" label="最后一次编辑时间">
            </m-table-column>-->
            <m-table-column
                prop="address"
                label="操作"
                align="center"
                min-width="80"
                fixed="right"
            >
              <template slot-scope="scope">
                <m-link icon="" @click="deleteConfirm(scope.row)">删除</m-link>
              </template>
            </m-table-column>
            <el-table-column
                label=""
                width="40"
                fixed="right">
              <template slot="header" slot-scope="scope">
                <span class="icons-more" @click="handleSettingLayOut"></span>
              </template>
            </el-table-column>
          </m-table>
        </template>

        <template slot="pagination">
          <div class="pagination-wrap">
            <m-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            >
            </m-pagination>
          </div>
        </template>
      </m-table-tmpl>
    </div>
    <!--内容部分E-->

    <m-dialog
        title="导入"
        v-model="dialog.visible"
        width="432px"
    >
      <div class="dialog-content" v-loading="dialog.loading">
        <div class="step-1" v-if="dialog.step===0">
          <div class="timer"></div>
          <div class="timer-right">
            <div>下载模板</div>
            <div class="gray">还没有导入内容？先点击下载模板并填写对应的信息</div>
            <m-button class="btn-down" @click="handleDownloadExample"><span class="icons-down"></span>下载模板</m-button>
            <div>上传文件</div>
            <div class="gray">将您填好的信息上传于此，支持.xlsx格式，不可超过 20 MB</div>
            <!--<m-button class="btn-down"><span class="icons-up"></span>上传文件</m-button>-->
            <el-upload
                class="upload-demo"
                ref="upload"
                :action="upload.action"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :limit="1"
                :on-change="handleChange"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                :on-error="handleError"
                :auto-upload="false">
              <!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
              <m-button slot="trigger" class="btn-down"><span class="icons-up"></span>选择上传文件</m-button>
              <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
            <div>导入规则</div>
            <div class="gray">当导入数据时：</div>
            <div>冲突数据自动更新；错误数据，提供导出错误报告</div>
          </div>
        </div>
        <div class="step-2" v-if="dialog.step===1">
          <m-result v-if="dialog.success_num>0" icon="success" title="导入成功" subTitle="">
            <template slot="extra">
              <div>
                {{ dialog.success_num }}条成功，<span style="color: #F52727">{{dialog.fail_num}}条失败</span>
              </div>
              <m-button type="primary" v-if="dialog.fail_num>0" @click="handleDownFail">下载错误报告</m-button>
              <m-button style="margin-top: 8px;" @click="dialog.visible = false">关闭</m-button>
            </template>
          </m-result>
          <m-result v-if="dialog.success_num===0" icon="error" title="导入失败" subTitle="">
            <template slot="extra">
              <div>
                {{ dialog.success_num }}条成功，<span style="color: #F52727">{{dialog.fail_num}}条失败</span>
              </div>
              <m-button type="primary" v-if="dialog.fail_num>0" @click="handleDownFail">下载错误报告</m-button>
              <m-button style="margin-top: 8px;" @click="dialog.step = 0">重新导入</m-button>
            </template>
          </m-result>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="dialog.step===0">
        <m-button type="primary" :disabled="dialog.curFileListNum>0?false:true" @click="handleUpload">导 入</m-button>
        <m-button  @click="dialog.visible = false">取 消</m-button>
      </span>
    </m-dialog>

    <m-dialog
        title="布局设置"
        v-model="dialog.visibleSetting"
        width="240px"
    >
      <div class="dialog-content">
<!--        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部字段</el-checkbox>-->
<!--        <div class="gray-text">固定在列首</div>-->
        <draggable v-model="headsData"
                   class="drag-container"
                   handle=".holder"
                   filter=".forbid"
                   :move="onMove"
                   animation="500">
          <div v-for="city in headsData" :key="city.name" class="drag-box" :class="['勾选', '操作'].includes(city.name)?'forbid':''">
            <span class="holder"></span>
            <el-checkbox class="checkbox-box" v-model="city.checked" :disabled="['勾选', '操作'].includes(city.name)" style="width: 60%">{{city.name}}</el-checkbox>
          </div>
        </draggable>

<!--        <div class="gray-text">固定在列尾</div>-->
      </div>
      <span slot="footer" class="dialog-footer">
<!--        <m-button type="primary">确定</m-button>
        <m-button  @click="dialog.visibleSetting = false">取消</m-button>-->
      </span>
    </m-dialog>
  </div>
</template>

<script>
import {intelligenceUpload,
  intelligenceDownloadFail,
  intelligenceDownloadExample,
  intelligenceCustomList,
  intelligenceCustomDelete,
  intelligenceCustomBatchDelete,
  intelligenceMockUserLogin
} from "@/request/source";
import $config from "@/config";
import dayjs from 'dayjs'
import draggable from "vuedraggable";

export default {
  name: "customSource",
  data() {
    return {
      dialog: {
        visible: false,
        loading: false,
        step: 0, //  0 导入 1 导入完成
        fail_key: '',
        fail_num: 0,
        success_num: 0,
        curFileListNum: 0,
        visibleSetting: false
      },
      isCollapse: false,
      queryData: {
        search_value: "",
        malicious_level: '', // 可信等级 0=未知 1=安全 2=可疑 3=恶意
      },
      AdSearch: false,
      tableType: "card",
      tableData: [
        /*{
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        },
        {
          Updated_at: "2024-04-24T12:44:37.069061Z",
          id: 168,
          intel_source: 1,
          intel_type: 1,
          judgments: ["远控", "僵尸网络"],
          malicious_level: 2,
          search_value: "boyonnem.ddns.net",
          severity_level: 0,
        }*/
      ],
      page: 1,
      total: 0,
      pageSize: 20,
      pageSizes: [20],
      fileList: [/*{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }*/],
      upload: {
        fileList: [],
        action: $config.path + "/custom/upload",
        data: {
          module: "CloudMiddleBusiness/ChargeFinance",
        },
      },
      intel_type: '', // 情报类型 0=IP 1=域名 2=URL 3=Hash 4=漏洞
      curIntelType: 0, // 第一个全部
      intelTypeOptions: [],
      multipleSelection: [],

      //
      checkAll: false,
      /*checkedCities: ['勾选','序号', '情报内容', '可信等级', '情报标签', '情报来源', '最后一次编辑时间', '操作'],
      cities: ['勾选', '序号', '情报内容', '可信等级', '情报标签', '情报来源', '最后一次编辑时间', '操作'],*/
      // checkedCities: [false, true, true, true, true, true],
      // cities: [ '序号', '情报内容', '可信等级', '情报标签', '情报来源', '最后一次编辑时间'],
      isIndeterminate: true,
      headsData:[
       /* {
          name: '序号',
          checked: true,
          isFreeze: false,
        },*/
        {
          name: '情报内容',
          checked: true,
          isFreeze: false,
        },
        {
          name: '恶意等级',
          checked: true,
          isFreeze: false,
        },
        {
          name: '情报标签',
          checked: true,
          isFreeze: false,
        },
        {
          name: '严重程度',
          checked: true,
          isFreeze: false,
        },
        {
          name: '情报来源',
          checked: true,
          isFreeze: false,
        },
        {
          name: '最后一次编辑时间',
          checked: true,
          isFreeze: false,
        }

      ]
    };
  },
  components: {
    draggable,
  },
  computed: {
    tableHeight() {
      // 获取父容器的高度并减去额外的像素值
      return this.$el.parentNode.clientHeight - 150; // 假设减去100px用于其他元素
    }
  },
  mounted() {
    this.intel_type = null
    this.getData()
  },
  watch:{
    headsData:{
      handler(){
        this.$nextTick(() => {
          console.log(77777777777)
          this.$refs.formname.doLayout()
        })
      },
      deep: true,
    }
  },
  methods: {
    handleReset(){
      this.queryData.malicious_level =  null
      this.queryData.search_value =  null
      this.intel_type =  null
      this.curIntelType =  0
      this.page = 1
      this.size = 10
      this.getData()
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      /*let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;*/
    },
    onMove(e, originalEvent){
      //不允许停靠
      console.log(e)
      if (e.relatedContext.element == '勾选') return false;

      //不允许拖拽
      if (e.draggedContext.element == '操作') return false;
      return true;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.dialog.curFileListNum = fileList.length
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(file, fileList){
      // console.log(file, fileList)
      this.dialog.curFileListNum = fileList.length
    },
    handleError(response, file, fileList){
      console.log(response, file, fileList)
    },
    handleUpload(){
      // 5b10dadc-802f-45cd-bf24-a8de73867652
      this.submitUpload()
      this.dialog.loading = true
      this.getData()
      /*intelligenceUpload().then((res)=>{
        console.log(res)
        this.dialog.visible = false
      }).catch(()=>{

      })*/
    },
    handleSuccess(response, file, fileList){
      console.log(response, file, fileList)

      if (response.data && response.code == 200) {
        this.dialog.loading = false
        this.dialog.step = 1
        this.dialog.fail_num = response.data.fail_num
        this.dialog.success_num = response.data.success_num
        this.dialog.fail_key = response.data.fail_key
      }
      if (response.code !== 200) {
        this.dialog.loading = false
        this.$m.message(response.message, "warning");
      }
      this.getData()
    },
    handleExceed(files, fileList){
      console.log(files, fileList)
      this.$m.message("最多上传" +files.length+ '文件', "warning");
    },
    // 下载错误报告
    handleDownFail (){
      /*intelligenceDownloadFail({fail_key: this.dialog.fail_key}).then((res)=>{
        console.log(res, 'resresresresres')
      }).catch(()=>{

      })*/
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.download = name || "demo";
      aLink.href = $config.path + '/custom/download/fail?fail_key=' + this.dialog.fail_key;
      //aLink.setAttribute("数据模版", "数据模版.xls");
      document.body.appendChild(aLink);
      aLink.click();
    },
    // 下载模板
    handleDownloadExample (){

      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.download = name || "demo";
      aLink.href = $config.path + '/custom/download/example';
      //aLink.setAttribute("数据模版", "数据模版.xls");
      document.body.appendChild(aLink);
      aLink.click();
      /*intelligenceDownloadExample().then((res)=>{

      }).catch(()=>{

      })*/
    },
    // 获取数据 表格数据
    getData() {
      // console.log(1);
      intelligenceCustomList({
        malicious_level: this.queryData.malicious_level || null,
        search_value: this.queryData.search_value || null,
        intel_type: this.intel_type,
        page: this.page,
        size: this.pageSize,
      }).then((res)=>{

        this.tableData = res.data.data.list

        this.total = res.data.total
        this.tableData.map((item)=>{
          item.Updated_at = dayjs(item.Updated_at).format('YYYY-MM-DD HH:mm:ss')
        })
        this.intelTypeOptions = res.data.data.intel_type_list

        this.$forceUpdate()
        this.dialog.loading = false
      }).catch((err)=>{
        console.log(err)
      })
    },
    // 情报类型切换
    handleTabType(index, item){
      this.curIntelType = index
      this.intel_type = item.intel_type
      this.getData()
    },
    // 每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.pageSize = val;
      this.getData();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 排序改变
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    // 确认删除
    deleteConfirm(data) {
      this.$m
          .confirm(`确定删除${data.search_value}吗？`,{
            title: '提示',
            cancelButtonClass: 'custom-cancel-button',
            type: 'warning',
          })
          .then(() => {
            intelligenceCustomDelete(data.id).then(()=>{
              this.$m.message("删除成功", "success");
              this.getData();
            }).catch(()=>{

            })

          })
          .catch(() => {});
    },
    handleBatchDelete(){
      let arr = []
      this.multipleSelection.map((item)=>{
        arr.push(item.id)
      })
      this.$m
          .confirm(`确定要删除所选的情报吗？`, {
            title: '提示',
            cancelButtonClass: 'custom-cancel-button',
            type: 'warning',
          })
          .then(() => {
            intelligenceCustomBatchDelete(arr).then(()=>{
              this.$m.message("删除成功", "success");
              this.getData();
            }).catch(()=>{

            })

          }).catch(() => {});

    },
    handleImport(){
      this.dialog.visible = true
      this.dialog.step = 0
      this.dialog.loading = false
      this.dialog.curFileListNum = 0

      /*intelligenceMockUserLogin().then(()=>{

      }).catch(()=>{

      })*/
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
      console.log(val)
    },
    // 布局设置
    handleSettingLayOut(){
      this.dialog.visibleSetting = true
    },
    cleanInput(event) {
      // 使用DOM的innerText和outerText方法来清理掉非法的输入
      /*event.target.value = event.target.value.replace(/<script>[\s\S]*?<\/script>/gi, '');
      console.log(event.target.value)
      this.queryData.search_value = event.target.value;*/
      // 获取输入框当前的值
      let value = event.target.value;
      // 过滤掉不允许的字符
      value = value.replace(/[<>]/g, '');
      // 更新数据以移除非法字符
      this.queryData.search_value = value;
      // 重设光标位置
      event.target.value = this.queryData.search_value;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.Source {
  //background-color: #F7F9FC !important;
  //box-shadow: none !important;
  // min-height: 99%;
  height: 100%;
  position: relative;
  padding-left: px2(156);
  display: flex;
  &.hide-collapse{
    padding-left: px2(0);
    .left-wrap{
      width: px2(0);
      .list-wrap{
        display: none;
      }
      .btn-box{
        background-image: url("./../../../assets/image/customSource/icons_show.png");
      }
    }
  }
  // 内容部分S
  .left-wrap{
    width: px2(156);
    height: 100%;
    border-right: 1px solid #EAECF1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    .list-wrap{
      padding: px2(12) px2(8);
      font-size: px2(14);
      .list-item{
        display: flex;
        height: px2(32);
        line-height: px2(32);
        justify-content: space-between;
        padding-right: px2(8);
        cursor: pointer;
        font-size: px2(12);
        &.on{
          color: #1C6EFF;
        }
      }
    }
    .btn-box{
      cursor: pointer;
      position: absolute;
      right: px2(-10);
      top: 0;
      bottom: 0;
      margin: auto;
      width: px2(10);
      height: px2(44);
      background-image: url("./../../../assets/image/customSource/icons_hide.png");

    }
  }
  .right-wrap{
    width: 100%;
    height: 100%;
    // padding: px2(12) px2(20);
    padding: px2(12) px2(20) px2(60) px2(20);
    position: relative;
  }
  // 内容部分E
}

.search-wrap{
  display: flex;
  justify-content: space-between;

}
.pagination-wrap{
  position: absolute;
  bottom: px2(10);
  right: px2(10);
  width: 100%;
}
@media screen and(max-height: 900px) {
  .pagination-wrap{
    bottom: px2(0);
    z-index: 10;
  }
}
.tag-box{
  margin-right: px2(2);
}

.icons-down{
  display: inline-block;
  vertical-align: sub;
  width: px2(16);
  height: px2(16);
  margin-right: px2(4);
  background-image: url("./../../../assets/image/customSource/icons_down.png");
}
.icons-up{
  display: inline-block;
  vertical-align: sub;
  width: px2(16);
  height: px2(16);
  margin-right: px2(4);
  background-image: url("./../../../assets/image/customSource/icons_up.png");
}

.step-1{
  display: flex;
  .timer{
    width: px2(12);
    height: px2(204);
    background-image: url("./../../../assets/image/customSource/timer_line.png");
  }
  .timer-right{
    font-size: px2(12);
    color: #2F3540;
    margin-left: px2(8);
    .gray{
      color: #A1A7B2;
    }
    .btn-down{
      margin: px2(9) 0;
    }
  }
}
.icons-more{
  cursor: pointer;
  display: inline-block;
  width: px2(16);
  height: px2(16);
  background-image: url("./../../../assets/image/customSource/icon_more.png");
}
.tag-item{
  margin-right: px2(2);
}
.gray-text{
  color: #A1A7B2;
}
.holder-box {
  display: block;
  width: px2(40);
}

.drag-box{
  display: flex;
  height: px2(32);
  line-height: px2(32);
  .holder {
    display: block;
    width: px2(16);
    height: px2(16);
    background-image: url("./../../../assets/image/source/holder.png");
    cursor: pointer;
    margin: auto;
  }
  .checkbox-box{
    flex: 1;
  }
}
.tag-tooltip-wrap{

  overflow: hidden;
  text-overflow: ellipsis;
   white-space: normal;
   word-break: break-all;
  display: flex;
}

</style>
